import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import queryApi from "../api/query";

const SelectLocation = ({ QuesContent, editAnswer, isEdit, flag }) => {
  console.log("isEdit---", isEdit);
  // const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);
  const [areaData, setAreaData] = useState([]);
  const [streetData, setStreetData] = useState([]);
  const [villageData, setVillageData] = useState([]);
  const [city, setCity] = useState(QuesContent.answer[0]);
  const [area, setArea] = useState(QuesContent.answer[1]);
  const [street, setStreet] = useState(QuesContent.answer[2]);
  const [village, setVillage] = useState(QuesContent.answer[3]);
  // const [ispFocus, setIspFocus] = useState(false);
  const [iscFocus, setIscFocus] = useState(false);
  const [isaFocus, setIsaFocus] = useState(false);
  const [issFocus, setIssFocus] = useState(false);
  const [isvFocus, setIsvFocus] = useState(false);
  // console.log("村---", village);

  useEffect(async () => {
    // await handeleProvince();
    // if (province != "") {
    await handeleCity("61");
    if (city != "") {
      await handeleArea(city);
      if (area != "") {
        await handeleStreet(area);
        if (street != "") {
          await handeleVillage(street);
        }
      }
    }
    // }
  }, []);

  // const handeleProvince = async () => {
  //   try {
  //     let provincesArray = await queryApi.get("location/provinces");
  //     console.log("获取所有省成功---", provincesArray.data.status);
  //     setProvinceData(provincesArray.data.data);
  //   } catch (error) {
  //     console.log("获取所有省失败---");
  //   }
  // };

  const handeleCity = async (provinceCode) => {
    let cityArray = [];
    try {
      let city = await queryApi.get("location/cities?code=" + provinceCode);
      console.log("获取陕西省所有市成功---", city.data.status);
      cityArray = city.data.data;
    } catch (error) {
      console.log("获取陕西省所有市失败---", error);
    }
    setCityData(cityArray);
    setAreaData([]);
    setStreetData([]);
    setVillageData([]);
  };

  const handeleArea = async (cityCode) => {
    let areaArray = [];
    try {
      let area = await queryApi.get("location/areas?code=" + cityCode);
      console.log("获取所有县成功---", area.data.status);
      areaArray = area.data.data;
    } catch (error) {
      console.log("获取所有县失败---");
    }
    setAreaData(areaArray);
    setStreetData([]);
    setVillageData([]);
  };

  const handeleStreet = async (areaCode) => {
    let streetArray = [];
    try {
      let street = await queryApi.get("location/streets?code=" + areaCode);
      console.log("获取所有镇成功---", street.data.status);
      streetArray = street.data.data;
    } catch (error) {
      console.log("获取所有镇失败---");
    }
    setStreetData(streetArray);
    setVillageData([]);
  };

  const handeleVillage = async (streetCode) => {
    let villageArray = [];
    try {
      let village = await queryApi.get("location/villages?code=" + streetCode);
      console.log("获取所有村成功---", village.data.status);
      villageArray = village.data.data;
    } catch (error) {
      console.log("获取所有村失败---");
    }
    setVillageData(villageArray);
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        padding: 10,
        borderRadius: 15,
        marginTop: 13,
      }}
    >
      {/* <Dropdown
        style={[styles.dropdown, ispFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={provinceData}
        search
        disable={!isEdit}
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!ispFocus ? "请选择省" : "..."}
        searchPlaceholder="Search..."
        value={province}
        onFocus={() => setIspFocus(true)}
        onBlur={() => setIspFocus(false)}
        onChange={(item) => {
          // console.log("省---", item);
          setProvince(item.code);
          setCity("");
          setArea("");
          setStreet("");
          setVillage("");
          handeleCity(item.code);
          setArea(null);
          setIspFocus(false);
          editAnswer([province, city, area, street, village]);
        }}
      /> */}
      <Dropdown
        style={[styles.dropdown, iscFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={cityData}
        search
        disable={!isEdit}
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!iscFocus ? "请选择市" : "..."}
        searchPlaceholder="Search..."
        value={city}
        onFocus={() => setIscFocus(true)}
        onBlur={() => setIscFocus(false)}
        onChange={(item) => {
          setCity(item.code);
          setArea("");
          setStreet("");
          setVillage("");
          handeleArea(item.code);
          setIscFocus(false);
          editAnswer(flag[0], flag[1], flag[2], {
            optionFlag: -1,
            answer: [item.code, "", "", ""],
          });
        }}
      />
      <Dropdown
        style={[styles.dropdown, isaFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={areaData}
        search
        disable={!isEdit}
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!isaFocus ? "请选择区" : "..."}
        searchPlaceholder="Search..."
        value={area}
        onFocus={() => setIsaFocus(true)}
        onBlur={() => setIsaFocus(false)}
        onChange={(item) => {
          setArea(item.code);
          setStreet("");
          setVillage("");
          handeleStreet(item.code);
          setIsaFocus(false);
          editAnswer(flag[0], flag[1], flag[2], {
            optionFlag: -1,
            answer: [city, item.code, "", ""],
          });
        }}
      />
      <Dropdown
        style={[styles.dropdown, issFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={streetData}
        search
        disable={!isEdit}
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!issFocus ? "请选择街道" : "..."}
        searchPlaceholder="Search..."
        value={street}
        onFocus={() => setIssFocus(true)}
        onBlur={() => setIssFocus(false)}
        onChange={(item) => {
          setStreet(item.code);
          setVillage("");
          handeleVillage(item.code);
          setIsaFocus(false);
          editAnswer(flag[0], flag[1], flag[2], {
            optionFlag: -1,
            answer: [city, area, item.code, ""],
          });
        }}
      />
      <Dropdown
        style={[styles.dropdown, isvFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={villageData}
        search
        disable={!isEdit}
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!isvFocus ? "请选择社区" : "..."}
        searchPlaceholder="Search..."
        value={village}
        onFocus={() => setIsvFocus(true)}
        onBlur={() => setIsvFocus(false)}
        onChange={(item) => {
          setVillage(item.code);
          setIsaFocus(false);
          editAnswer(flag[0], flag[1], flag[2], {
            optionFlag: -1,
            answer: [city, area, street, item.code],
          });
        }}
      />
    </View>
  );
};

export default SelectLocation;

const styles = StyleSheet.create({
  dropdown: {
    height: 55,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 25,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  subtitle: {
    fontSize: 16,
  },
});
